<div class="progress_chart">
  <span class="goal">
    <%if distance>goal/2 && distance<goal %>
      <span class="labels" style="left: <%= (percent_complete(distance,goal)) + 5 %>px;"><%= distance %> miles to date</span>
    <%elsif distance>=goal%>
      <span class="labels" style="left: 190px;"><%= distance %> miles to date</span>
    <%else%>
      <span class="labels" style="left: <%= (percent_complete(distance,goal) * 4) + 5 %>px;"><%= distance %> miles to date</span>
    <%end%>
    <span class="distance" style="width: <%= percent_complete(distance,goal) * 4 %>px;"></span>
  </span>
  <span class="labels">Goal: <%= goal %> miles</span>
  <div class="percentages"><span class="first">0</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
</div>
 <script src="http://maps.google.com/maps?file=api&v=2&key=<%=@program.gmapapi%>&sensor=false"
 
	type="text/javascript"></script>
		
		<script type="text/javascript"> 
var map;
var geoXml;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas")); 
    geoXml = new GGeoXml("http://atlasrider.com/KMZ/2009ChicagoMarathon.kmz");
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(41.875696,-87.624207), 11); 
    map.addControl(new GLargeMapControl());
    map.addOverlay(geoXml);
  }
} 
		</script> 
			<body onload="initialize();" onunload="GUnload();"> 
			<div id="map_canvas" style="width: 500px; height: 300px">">
			</div>
            
          
          


